
<template>
  <div class="card" v-if="data.user.data[0].role==='Root'" style="margin-bottom: 10px">
    <span style="padding-left: 40%">管理员无个人选课信息</span>
  </div>



  <div class="card" style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="170" />
      <el-table-column prop="name" label="课程名称" width="170" />
      <el-table-column prop="no" label="课程编号" width="170" />
      <el-table-column prop="teacher" label="老师" width="170" />

      <el-table-column label="操作" width="170">
        <!--        #默认值=“范围”scope表单.row行信息-->
        <template #default="scope">
          <el-button type="danger" @click="dele(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <!--      <el-table-column必须加width不然会报错-->

    </el-table>
  </div>
  <div class="card" style="margin-bottom: 10px">
    <!--绑定分页插件,点击分页事件-->
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />
  </div>


</template>

<script  setup>


import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";

const data =reactive({
  name:'',
  descr:'',
  tableData:[],
  total: 0,
  pageSize: 10,
  pageNum: 1,
  user: JSON.parse(localStorage.getItem('student-user')||'{}')
})

//自定义数组
const load = () =>{
  request.get('/Course/selectPage',{
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      name:data.name,
      descr:data.descr,
      student_id:data.user.data[0].id,
      form:{}

    }
  }).then(res=>{
    console.log(res.data.data.total)
    data.tableData=res.data.data?.list ||[]
    data.total=res.data.data.total || 0

  })


}


load()
const handelCurrentChange =(pageNum)=>{
  //当翻页当时候从新加载数据
  load()

}



//自定义data

const dele =(id)=>{
  //确认信息
  ElMessageBox.confirm('删除该数据后该数据无法恢复，您确定删除吗？','删除确认',{
    type:'warning'
  }).then(res=>{
    request.delete('/Course/delete/'+id).then(res=>{
      //记得加斜杆/delete/
      if (res.data.code===1){
        load()
        ElMessage.success( "操作成功")

      }else {
        console.log(res)
        ElMessage .error("操作失败")
      }
    })
  }).catch(() => {
    ElMessage({

      type: 'info',
      message: 'Delete canceled'
    })
  })

}




</script>






<style scoped>

</style>

